<template>
  <div>
    <!-- 顶部滑动条 -->
    <div id="slider" class="mui-slider">
      <div id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">

          <a :class="['mui-control-item',item.id == 0 ? 'mui-active' : '']" v-for="item in clum" :key="item.id"
            @click="getImglist(item.id)">
            {{ item.title }}
          </a>

        </div>
      </div>

    </div>

    <ul class="photo-list">
      <router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/'+item.id" tag="li">
        <img v-lazy="item.img_url">
        <div class="text-box">
          <h4 class="tit">{{ item.title }}</h4>
          <p class="dec">{{ item.seo_description }}</p>
        </div>
      </router-link>
    </ul>

  </div>
</template>


<script>
  import mui from "../../lib/mui/js/mui.js"

  export default {
    data() {
      return {
        clum: [],
        list: []
      }
    },
    created() {
      this.getAllclum();
      this.getImglist(0);
    },
    mounted() {
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    },
    methods: {
      getAllclum() {
        this.$http.get('api/getimgcategory').then(result => {
          if (result.body.status === 0) {
            result.body.message.unshift({
              title: "全部",
              id: 0
            })
            this.clum = result.body.message;
          } else {
            Toast('栏目数据获取失败')
          }
        })
      },
      getImglist(cateid) {
        this.$http.get('api/getimages/' + cateid).then(result => {
          if (result.body.status === 0) {
            this.list = result.body.message
          }
        })
      }
    }
  }
</script>
<style lang="scss" scpoed>
  * {
    touch-action: pan-y
  }

  img[lazy=loading] {
    width: 40px;
    height: 40px;
    margin: auto;
  }

  .photo-list {
    list-style: none;
    margin: 0 10px;
    padding: 0;
    padding-top: 10px;

    li {
      background: #999;
      box-shadow: 0px 0px 9px #ccc;
      text-align: center;
      margin-bottom: 10px;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    img {
      width: 100%;
      display: block;
    }

    .text-box {
      width: 100%;
      padding: 10px;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: left;

      .tit {
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .dec {
        font-size: 12px;
        color: #ccc;
      display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;  //需要显示时文本行数
        overflow: hidden;
      }
    }
  }
</style>